<script type="text/javascript" language="javascript" charset="utf-8">
$(".header-con li a").removeClass("open-menu");
$(".header-con li #statistical_datum").addClass("open-menu");
</script>
<div class="boxed clearfix">
  <div class="common-tit">
    <h2>商品数据</h2>
    <span>数据统计 > 商品数据</span>
    <div class="cours-gbtn">
      <div class="list-box">
        <div class="downbtn">
          <span>全部分店</span>
          <em></em>
        </div>
        <ul class="dropdown-menu">
          <li data_id="all">全部分店</li>
          <% @studios.each do |stu| %>
            <li data_id="<%= stu.id %>"><%= stu.name %></li>
          <%end%>
        </ul>
      </div>
    </div>
  </div>
  <div class="global-data">
    <div class="xdata-box">
      <h3>总计</h3>
      <ul>
        <li>
          <span><%= @total_price %></span>
          <em>累积营业额(元)</em>
        </li>
        <li>
          <span><%= @total_price_lesson %></span>
          <em>课程商品(元)</em>
        </li>
        <li>
          <span><%= @total_price_peripheral %></span>
          <em>周边商品(元)</em>
        </li>
      </ul>
      <div id="commLimit"></div>
    </div>
    <div class="pdata-box clearfix">
      <h3>
        <span>商品排行榜</span>
        <div class="pda-tit">
          <em class="pda-sel">销量排行</em>
          <em>金额排行</em>
        </div>
      </h3>
      <div id="commPro"></div>
    </div>
  </div>
</div>
<script src="/assets/js/echarts.common.min.js"></script>
<script src="/assets/js/common-list.js"></script>
<script>
// 商品数据分析
var myChart = echarts.init(document.getElementById('commLimit'));
var xAxisData = [];
var data1 = <%== @total_price_array %>;
var data2 = <%== @total_price_lesson_array %>;
var data3 = <%== @total_price_peripheral_array %>;

option = {
  legend: {
    data: ['累积营业额(元)', '课程商品(元)', '周边商品(元)'],
    align: 'left'
  },
  toolbox: {
    // y: 'bottom',
    feature: {
      magicType: {
        type: ['stack', 'tiled']
      },
      dataView: {},
      saveAsImage: {
        pixelRatio: 2
      }
    }
  },
  tooltip: {},
  xAxis: {
    data: xAxisData,
    silent: false,
    splitLine: {
      show: false
    }
  },
  yAxis: {
  },
  toolbox: {
    show : true,
  },
  dataZoom: [{
    startValue: '2016-10-09'
  }, {
    type: 'inside'
  }],
    series: [{
      name: '累积营业额(元)',
      type: 'bar',
      data: data1,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }, {
      name: '课程商品(元)',
      type: 'bar',
      data: data2,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }, {
      name: '周边商品(元)',
      type: 'bar',
      data: data3,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }],
      animationEasing: 'elasticOut',
      animationDelayUpdate: function (idx) {
        return idx * 5;
      }
};
myChart.setOption(option);

var tmp_total_amount_all_name = <%== @tmp_total_amount_all_name %>;
var tmp_total_amount_all = <%== @tmp_total_amount_all %>;

var tmp_total_price_all = <%== @tmp_total_price_all %>;
var tmp_total_price_all_name = <%== @tmp_total_price_all_name %>;

// 商品排行榜
var myChart1 = echarts.init(document.getElementById('commPro'));
option1 = {
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['2011年', '2012年']
  },
  grid: {
    left: '10%',
    right: '10%',
    top: '1%',
    containLabel: false
  },
  toolbox: {
    show : true,
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type : 'category',
    axisLabel:{
      interval:0,
      rotate:0,
      margin:2,
      textStyle:{
        color:"#222"
      }},
    data: tmp_total_amount_all_name
  },
  series: [
  {
    name: '销量数量(个)',
    type: 'bar',
    data: tmp_total_amount_all
  }
  ]
};

myChart1.setOption(option1);

//  切换  销量排行  金额排行
//假数据
var testObj = {
  "yj" : [{
    dataY: tmp_total_amount_all_name,
    dataX: tmp_total_amount_all
  }],
  "hf" : [{
    dataY: tmp_total_price_all_name,
    dataX: tmp_total_price_all
  }]
}
$(".pda-tit em").on("click", function() {
  if ($(this).index() == 0) {
    myChart1.setOption({
      yAxis: {
        data: testObj.yj[0].dataY
      },
      series: [{
        name: '销量数量(个)',
        type: 'bar',
        data: testObj.yj[0].dataX
      }]
    });
  } else {
    myChart1.setOption({
      yAxis: {
        data: testObj.hf[0].dataY
      },
      series: [{
        name: '销售金额(元)',
        type: 'bar',
        data: testObj.hf[0].dataX
      }]
    });
  }
  if (!$(this).hasClass("pda-sel")) {
    $(this).addClass("pda-sel").siblings().removeClass("pda-sel");
  };
})
</script>
<script type="text/javascript">
  $(".cours-gbtn .list-box li").on("click", function() {
    $(this).parent().parent().find("span").attr("data_id", $(this).attr("data_id"));
    transD = $(this).attr("data_id");
    $.ajax({
      type:'get', url:"/admin/statistical_datum/change_commodity?studio_id="+ transD,
      success: function(data) {
        if (data.error) {
        // console.log("wrong");
        } 
      }
    });
  });
</script>
